<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet" type="text/css"></link>
<link href="css/example.css" type="text/css" rel="stylesheet"></link>
<title>Library</title>
</head>

<body>
    <h1>Library</h1>

    <div id="container">
        <h:form id="response">
            <div class="div-50">
	            <h2>Authors</h2>

	            <h:dataTable value="#{library.authors}" var="a">
	                <h:column>
	                    <f:facet name="header">
	                        <h:commandLink action="#{library.sort(library.authorColumns['ID'])}">
	                            <h:outputText value="ID"/>
                                <h:outputText value="⇧" rendered="#{library.sort['AUTHOR'].name == 'ID' and library.sort['AUTHOR'].order == 'ASC'}"/>
                                <h:outputText value="⇩" rendered="#{library.sort['AUTHOR'].name == 'ID' and library.sort['AUTHOR'].order == 'DESC'}"/>
                            </h:commandLink>
                        </f:facet>

	                    <h:outputText value="#{a.id}"/>
	                </h:column>

	                <h:column>
                        <f:facet name="header">
                            <h:commandLink action="#{library.sort(library.authorColumns['FIRST_NAME'])}">
                                <h:outputText value="First Name"/>
                                <h:outputText value="⇧" rendered="#{library.sort['AUTHOR'].name == 'FIRST_NAME' and library.sort['AUTHOR'].order == 'ASC'}"/>
                                <h:outputText value="⇩" rendered="#{library.sort['AUTHOR'].name == 'FIRST_NAME' and library.sort['AUTHOR'].order == 'DESC'}"/>
                            </h:commandLink>
                        </f:facet>

	                    <h:outputText value="#{a.firstName}" rendered="#{library.edit != a}"/>
	                    <h:inputText value="#{a.firstName}" rendered="#{library.edit == a}"/>

	                    <f:facet name="footer">
	                        <h:inputText value="#{library.newAuthor.firstName}"/>
	                    </f:facet>
	                </h:column>

	                <h:column>
                        <f:facet name="header">
                            <h:commandLink action="#{library.sort(library.authorColumns['LAST_NAME'])}">
                                <h:outputText value="Last Name"/>
                                <h:outputText value="⇧" rendered="#{library.sort['AUTHOR'].name == 'LAST_NAME' and library.sort['AUTHOR'].order == 'ASC'}"/>
                                <h:outputText value="⇩" rendered="#{library.sort['AUTHOR'].name == 'LAST_NAME' and library.sort['AUTHOR'].order == 'DESC'}"/>
                            </h:commandLink>
                        </f:facet>

	                    <h:outputText value="#{a.lastName}" rendered="#{library.edit != a}"/>
	                    <h:inputText value="#{a.lastName}" rendered="#{library.edit == a}"/>

	                    <f:facet name="footer">
	                        <h:inputText value="#{library.newAuthor.lastName}"/>
	                    </f:facet>
	                </h:column>

	                <h:column>
	                    <f:facet name="header">Actions</f:facet>

	                    <h:commandButton value="edit" action="#{library.edit(a)}" rendered="#{library.edit != a}"/>
	                    <h:commandButton value="save" action="#{library.save(a)}" rendered="#{library.edit == a}"/>

	                    <h:commandButton value="delete" action="#{library.delete(a)}"/>

	                    <f:facet name="footer">
	                        <h:commandButton value="create" action="#{library.save(library.newAuthor)}"/>
	                    </f:facet>
	                </h:column>
	            </h:dataTable>
            </div>

            <div class="div-50">
                <h2>Books</h2>

                <h:dataTable value="#{library.books}" var="b">
                    <h:column>
                        <f:facet name="header">
                            <h:commandLink action="#{library.sort(library.bookColumns['ID'])}">
                                <h:outputText value="ID"/>
                                <h:outputText value="⇧" rendered="#{library.sort['BOOK'].name == 'ID' and library.sort['BOOK'].order == 'ASC'}"/>
                                <h:outputText value="⇩" rendered="#{library.sort['BOOK'].name == 'ID' and library.sort['BOOK'].order == 'DESC'}"/>
                            </h:commandLink>
                        </f:facet>

                        <h:outputText value="#{b.id}"/>
                    </h:column>

                    <h:column>
                        <f:facet name="header">Author</f:facet>

                        <h:outputText value="#{library.authorById[b.authorId].firstName} #{library.authorById[b.authorId].lastName}" rendered="#{library.edit != b}"/>
	                    <h:selectOneMenu value="#{b.authorId}" rendered="#{library.edit == b}">
                            <f:selectItems value="#{library.authorsAlphanumeric}" var="a" itemLabel="#{a.firstName} #{a.lastName}" itemValue="#{a.id}" />
				        </h:selectOneMenu>

				        <f:facet name="footer">
	                        <h:selectOneMenu value="#{library.newBook.authorId}">
	                            <f:selectItems value="#{library.authorsAlphanumeric}" var="a" itemLabel="#{a.firstName} #{a.lastName}" itemValue="#{a.id}" />
	                        </h:selectOneMenu>
				        </f:facet>
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:commandLink action="#{library.sort(library.bookColumns['TITLE'])}">
                                <h:outputText value="Title"/>
                                <h:outputText value="⇧" rendered="#{library.sort['BOOK'].name == 'TITLE' and library.sort['BOOK'].order == 'ASC'}"/>
                                <h:outputText value="⇩" rendered="#{library.sort['BOOK'].name == 'TITLE' and library.sort['BOOK'].order == 'DESC'}"/>
                            </h:commandLink>
                        </f:facet>

                        <h:outputText value="#{b.title}" rendered="#{library.edit != b}"/>
                        <h:inputText value="#{b.title}" rendered="#{library.edit == b}"/>

                        <f:facet name="footer">
                            <h:inputText value="#{library.newBook.title}"/>
                        </f:facet>
                    </h:column>

                    <h:column>
                        <f:facet name="header">Actions</f:facet>

                        <h:commandButton value="edit" action="#{library.edit(b)}" rendered="#{library.edit != b}"/>
                        <h:commandButton value="save" action="#{library.save(b)}" rendered="#{library.edit == b}"/>

                        <h:commandButton value="delete" action="#{library.delete(b)}"/>

                        <f:facet name="footer">
                            <h:commandButton value="create" action="#{library.save(library.newBook)}"/>
                        </f:facet>
                    </h:column>
                </h:dataTable>
            </div>
        </h:form>
    </div>
</body>
</html>